<template>
  <div class="updateTable">
    <div class="updateNav">
      <h3 style="margin: 0; display: inline-block">远程更新</h3>
    </div>
    
    <div class="pagination-container footerPage">
      <el-pagination
        @current-change="CurrentChange"
        @size-change="SizeChange"
        :page-sizes="[5, 10, 20, 50]"
        background layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <el-button class="navButton" style="position: absolute;margin: -5px 1300px 5px 15px;" type="primary" v-on:click="dialogTurn()" >配置更新</el-button>
    <div  class="updateList">
      <el-table
        :data="tableData"
        border
        stripe border fit highlight-current-row
        style="width: 100%; max-height:788px; overflow-y: auto"
        :height='788'
        :header-cell-style="{background:'#f7f8f9'}"
      >
        <el-table-column type="index" label="序号" width="60px" align="center"></el-table-column>
        <el-table-column label="站点编号" width="150px" prop="pid" sortable></el-table-column>
        <el-table-column label="设备编号" width="240px" prop="pname"></el-table-column>
        <el-table-column label="程序版本" width="160px" prop="version" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.version}}</span>
            <el-popover
              style="display: none"
              placement="bottom-start"
              trigger="hover"
              :title = version
              :content= description >
              <i slot="reference" style="position: relative; top: 2px"><img src="../../../assets/remoteUpdate/QuestionMark.png"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="最近更新时间" width="190px" prop="update_time" sortable></el-table-column>
        <el-table-column label="更新类型" width="150px" prop="update_type">
          <template  slot-scope="scope" >
            <span v-if="scope.row.update_type === 'conf'">配置</span>
            <span v-if="scope.row.update_type === 'pro'">工程</span>
          </template>
        </el-table-column>
        <el-table-column label="更新内容" prop="update_content"></el-table-column>
        <el-table-column label="更新状态" width="150px" prop="update_status">
          <template  slot-scope="scope" >
            <span v-if="scope.row.update_status === 1">失败</span>
            <span v-if="scope.row.update_status === 2">成功</span>
            <span v-if="scope.row.update_status === 3">备份</span>
            <span v-if="scope.row.update_status === 4">下载</span>
            <span v-if="scope.row.update_status === 6">安装</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <update-dialog v-if="dialogShow" @giveFalse="dialogReturn" ></update-dialog>
  </div>
</template>
<script>
  import updateDialog from './updateDialog'
  import updateMassage from './updateMassage'
  // import { updateRecord } from '@/api/remoteUpdata/index'

  import axios from 'axios'

  export default {
    components: {
      updateDialog,
      updateMassage
    },
    data() {
      return {
        name: 'updateTable',
        // 时间
        value1: '',
        value2: '',
        tableData: [],
        indexMethod: '',
        dialogShow: false,
        description: '', // 描述
        version: '', // 版本号
        total: 0, // 总条数
        // 换页
        siteListQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        // tablePid: '',
        submitdata: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'update_get_record',
          pid: localStorage.getItem('num'),
          update_type: 'conf',
          page: {
            page_size: '10',
            page_number: '1'
          }
        },
        queryNumList: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'update_get_version_desc',
          pid: localStorage.getItem('num'),
          program_type: 0
        }
      }
    },
    mounted() {
      this.queryData()
      this.queryupdatelist()
    },
    methods: {
      // 换页
      handleSizeChange(val) {
        this.siteListQuery.limit = val
        this.gettableData()
      },
      handleCurrentChange(val) {
        this.siteListQuery.page = val
        this.tableData()
      },
      dialogTurn() {
        this.dialogShow = !this.dialogShow
      },
      // 父组件接收值
      dialogReturn(data) {
        this.dialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log(data)
        setTimeout(() => {
          this.queryData()
        }, 2000)
      },
      // 获取列表信息
      queryData() {
        /* 有登录后可调整为以下代码**/
        /*
        updateRecord(this.submitdata).then(res => {
          console.log(11111111111111)
          console.log(res)
          this.$router.push({
            // path: 'usermanage'
          })
        }).catch(() => {
          console.log('失败!')
          return
        })*/
        // 配置更新总览
        axios.post('/update', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.tableData = res.data.datas
          this.total = parseInt(res.data.page.total)
          // this.tablePid = this.tableData[0].pid
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      CurrentChange(val) {
        this.submitdata.page.page_number = (val) + ''
        this.queryData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.submitdata.page.page_size = (pageSize) + ''
        this.queryData()
      },
      // 获取版本信息
      queryupdatelist() {
        axios.post('/update', this.queryNumList, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          const list = res.data.datas
          for (const querylist in list) {
            this.description = '描述:' + list[querylist].desc
            this.version = '版本号:' + list[querylist].lable
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 更新配置dialog
      remoteUpdateDialo() {
        axios.post('/update', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.get_account_main = res.data.data
        })
          .catch(function(error) {
            console.log(error)
          })
      }

    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .updateTable{
    width: 100%;
    min-height: 500px;
    .updateNav{
      width: 100%;
      min-height: 50px;
      background-color: #fff;
      font-size:14px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(105,114,126,1);
      line-height: 20px;
      padding: 15px 20px  0px 20px;
      .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
        /*padding-top: 10px;*/
      }
    }
    .updateList{
      width: 100%;
      min-height:20vw;
    }
    .footerPage{
      float: right;
      right:-9px;
      position: relative;
    }
  }
  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #FAFAFA;
  }
  /deep/  .el-form--inline .el-form-item__content {
    display: inline-block;
    vertical-align: middle;
  }
  .navButton{
    width: 80px;
    height: 30px;
    float: right;
    padding: 0;
    line-height: 30px;
  }
  /deep/ .el-table--border th, .el-table__fixed-right-patch{
    padding: 3px 0;
  }

</style>
